<script setup>
    import usePage from '@hooks/use_page'
    import Pagination from './Pagination.vue'

    const props = defineProps({
        onLoad: {
            type: Boolean,
            default: true
        },
        noPage: Boolean,
        leftPage: Boolean
    })

    const emit = defineEmits(['getData'])

    const {
        clear,
        loading,
        pageNum,
        pageSize,
        tableData,
        sizeChange,
        selectPage,
        refresh,
        refreshCurrent
    } = usePage(getData, props.onLoad)

    function getData(pageNum, pageSize) {
        return new Promise((resolve, reject) => {
            emit('getData', { pageNum, pageSize }, (res) => {
                resolve(res)
            })
        })
    }

    //flag false 第一页, true当前页
    const onRefresh = (flag) => {
        flag ? refreshCurrent() : refresh()
    }

    defineExpose({
        refresh: onRefresh,
        clearData: clear
    })
</script>

<template>
    <section>
        <slot
            :tableData="tableData"
            :loading="loading"
            :pageNum="pageNum"
            :pageSize="pageSize"
        ></slot>
        <div class="margin-top8">
            <pagination
                v-if="!noPage"
                :left="leftPage"
                :pageNum="pageNum"
                :pageSize="pageSize"
                @size-change="sizeChange"
                @select-page="selectPage"
                :total="Number(tableData.total || tableData.count || tableData.records.length) || 0"
            >
                <slot name="BL" :tableData="tableData"></slot>
            </pagination>
        </div>
    </section>
</template>
